<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">
          <span>订单查询</span>
        </div>
      </div>
      <div class="p-cont">
        <div class="title">药品订单查询</div>

        <div class="search-warp">
          <el-input
            v-model="searchContent"
            placeholder="请输入订单编号"
            @change="getContentApi"
            size="large"
          >
            <template #append>
              <el-button :icon="Search" @click="getContentApi" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { searchOrders } from "@/api/supply";
import { useRouter } from "vue-router";
const router = useRouter();
const searchContent = ref("");
const hasApi = ref(false);
async function getContentApi() {
  if (!hasApi.value) {
    console.log("searchContent.value:", searchContent.value);
    if (searchContent.value) {
      hasApi.value = true;
      const listRes = await searchOrders(searchContent.value);
      hasApi.value = false;
      console.log("listRes:", listRes);
      if (listRes && !listRes.code) {
        localStorage.setItem("orderDetail", JSON.stringify(listRes));
        router.push({
          path: "/supply/orderDetail"
        });
      }
    } else {
      hasApi.value = false;
      ElMessage({
        message: "订单编号不能为空",
        type: "error"
      });
    }
  }
}
</script>
<style scoped lang="scss">
.main {
  .part {
    height: calc(100vh - 150px);
    position: relative;

    .p-title {
    }

    .p-cont {
      width: 500px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%);

      .title {
        margin-bottom: 20px;
        font-size: 28px;
        color: #333;
        font-weight: bold;
        text-align: center;
      }

      .search-warp {
      }
    }
  }
}
</style>
